<template>
    <div class="main">
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" size="default"
            status-icon :rules="rules">
            <el-form-item label="商品名称" prop="productName">
                <el-input v-model="ruleForm.productName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="分类名称" prop="productType">
                <el-cascader v-model="productType" :options="options" :props="propsData" @change="handleChange"
                    :show-all-levels="false" />
            </el-form-item>
            <el-form-item label="商品图片" prop="productPhoto">
                <Uploads :row="ruleForm.productPhoto" @OK="OKdata" @removeImg="removeImg"></Uploads>
            </el-form-item>
            <el-form-item label="售价" prop="sellingPrice">
                <el-input v-model.number="ruleForm.sellingPrice" type="number"
                    oninput="if(!/^[0-9]+$/.test(value)) if(value<=0)value=0" />
            </el-form-item>
            <el-form-item label="库存" prop="inventory">
                <el-input v-model.number="ruleForm.inventory"
                    oninput="if(!/^[0-9]+$/.test(value))value=value.replace(/\D/g,'');if(value<=0)value=0"
                    type="number" />
            </el-form-item>
            <el-form-item label="热力值" prop="thermalValue">
                <el-input v-model.number="ruleForm.thermalValue"/>
            </el-form-item>
            <el-form-item label="商品规格" prop="productSpecifications">
                <el-input v-model="ruleForm.productSpecifications" placeholder="请输入" type="textarea" />
            </el-form-item>
            <el-form-item label="使用说明" prop="illustrate">
                <Wangeditor @closeOK="closeOKDataillustrate" :row="ruleForm.illustrate">
                </Wangeditor>
            </el-form-item>
            <el-form-item label="图文详情" prop="graphicDetails">
                <Wangeditor @closeOK="closeOKDatagraphicDetails" :row="ruleForm.graphicDetails">
                </Wangeditor>
            </el-form-item>
            <el-form-item label="费用说明" prop="feeDescription">
                <Wangeditor @closeOK="closeOKDatafeeDescription" :row="ruleForm.feeDescription">
                </Wangeditor>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
                <el-button @click="closeAdd()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
// 富文本
import Wangeditor from '@/components/wangeditor/index.vue'
import Uploads from '@/components/elUploads/index.vue'
import { onMounted, reactive, ref } from 'vue'
import { productListUpdate, productListAdd, classificationList } from '@/api/goods.js'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router';
const route = useRoute();
const emit = defineEmits(['closeAdd', 'closeOK'])
const props = defineProps({
    isAdd: {
        type: Boolean,
        default: true, // 默认值为 true
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
onMounted(() => {
    getOptions()

    if (!props.isAdd) {
        ruleForm.productName = props.row.productName; // 初始化表单字段值
        ruleForm.productType = props.row.productType; // 初始化表单字段值
        productType.value = props.row.productType; // 初始化表单字段值
        ruleForm.productPhoto = props.row.productPhoto; // 初始化表单字段值
        ruleForm.sellingPrice = props.row.sellingPrice; // 初始化表单字段值
        ruleForm.inventory = props.row.inventory; // 初始化表单字段值
        ruleForm.illustrate = props.row.illustrate; // 初始化表单字段值
        ruleForm.graphicDetails = props.row.graphicDetails; // 初始化表单字段值
        ruleForm.productSpecifications = props.row.productSpecifications; // 初始化表单字段值
        ruleForm.feeDescription = props.row.feeDescription; // 初始化表单字段值
        ruleForm.thermalValue = props.row.thermalValue; // 初始化表单字段值


    }
})

const ruleFormRef = ref()
const ruleForm = reactive({
    productName: '',
    productType: '',
    productPhoto: [],
    sellingPrice: 0,
    inventory: 0,
    illustrate: '',
    graphicDetails: '',
    productSpecifications: '',
    feeDescription: '',
    thermalValue: '',


})
const rules = reactive({
    productName: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    productType: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    productPhoto: [
        { required: true, message: '请上传图片', trigger: 'blur' },
    ],
    sellingPrice: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    inventory: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    thermalValue: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],

})
const options = ref([])
const productType = ref([])

const propsData = {
    children: 'children',
    label: 'classification_name',
    value: 'classification_name',
}

const handleChange = (val) => {
    ruleForm.productType = val[val.length - 1]
}


const getOptions = () => {
    let par = {
        classificationName: "",
        pageNum: 1,
        pageSize: 999
    }
    classificationList(par).then(res => {
        if (res.code == 200) {
            options.value = res.data.records

        }
    })
}
// 费用说明
const closeOKDatafeeDescription = (val) => {
    ruleForm.feeDescription = val
}
// 图文详情
const closeOKDatagraphicDetails = (val) => {
    ruleForm.graphicDetails = val
}
// 使用说明
const closeOKDataillustrate = (val) => {
    ruleForm.illustrate = val
}


// 图片上传
const OKdata = (url) => {
    ruleForm.productPhoto.push(...url)
}
// 图片-删除
const removeImg = (item) => {
    ruleForm.productPhoto = item

}



// 表格确认
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {

            if (props.isAdd) {
                productListAdd(ruleForm).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        emit('closeOK')
                    }
                })
            } else {
                productListUpdate({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 关闭
const closeAdd = () => {
    emit('closeAdd')
}
</script>

<style lang="scss" scoped>
.main {
    max-height: 800px;
    overflow-y: auto;
}

.is-closable {
    margin-right: 5px;
}

.demo-ruleForm {

    .el-input,
    .el-select {
        width: 300px;
    }

    .el-textarea {
        width: 400px;
    }
}
</style>